<template>
  <div style="background: #020202;">
    <div>
      <el-button type="primary" @click="changeMode">{{
        mode === 1 ? '编辑模式' : '查看模式'
      }}</el-button>
    </div>
    <el-table style="background: #020202;" border :data="list">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="收入" prop="money"></el-table-column>
      <el-table-column label="籍贯" prop="belong"></el-table-column>
      <el-table-column label="操作" v-if="mode === 1">
        <template slot-scope="{ row }">
          <el-button @click="handle(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mock } from 'mockjs'

let generateData = () => {
  let data = mock({
    "list|5": [
      {
        name: '@cname',
        'age|+1': 1,
        'sex|0-1': 1,
        'money': 1,
        'belong': '湖北'
      }
    ]
  })

  return data.list
}

export default {
  name: 'index',
  data () {
    return {
      mode: 1,
      list: generateData()
    }
  },
  methods: {
    changeMode () {
      this.mode = this.mode === 1 ? 0 : 1
    },
    handle () {

    }
  }
}
</script>
